<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
  <title>云API</title>
  <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../css/style.css" />
  <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
  <style>
    html,
    body {
      background-color: #f5f6f6;
    }

    .empty {
      margin-left: auto;
      margin-right: auto;
      width: 98%;
    }

    .doufu {
      margin-top: 5px;
    }

    .doufu li {
      width: 50%;
      float: left;
    }

    .doufu li div {
      margin: 5px;
      background-color: #fff;
      padding: 10px;
    }

    .ci {
      text-align: left;
      height: 1px;
      line-height: 0px;
    }

    .ci span {
      padding-left: 16px;
      float: right;
    }

    .shu {
      text-align: center;
      font-size: 22px;
      line-height: 30px;
      height: 30px;
      color: #1abc9c;
    }

    .hui {
      color: #555555;
      font-size: 13px;
    }

    .bimg {
      background-image: url(../image/tanhao.png);
      background-size: 16px;
      background-position: right;
      background-repeat: no-repeat;
    }

    .shangcheng {
      background-image: url(../image/shangsheng.png);
      background-size: 16px;
      background-position: left -2px;
      background-repeat: no-repeat;
      width: 24px;
    }

    .xiajiang {
      background-image: url(../image/xiajiang.png);
      background-size: 16px;
      background-position: 0%;
      background-repeat: no-repeat;
      width: 30px;
    }

    .tongjiimg {
      margin-left: auto;
      margin-right: auto;
      width: 95%;
    }

    .tongjiimg img {
      margin-top: -1px;
    }

    .wode {
      background-color: #1abc9c;
      padding: 8px 0px 8px 10px;
      /*  background-image: url(../image/setting_cell_arrow@2x.png); */
      background-size: 10px;
      /* background-position: right 15px center; */
      background-repeat: no-repeat;
    }

    .wode p:nth-child(1) {
      font-size: 18px;
    }

    .wode p {
      line-height: 25px;
      color: #fff;
    }

    .s {
      font-size: 10px;
    }

    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <!--  <div class="wode" onclick="openDetail('wode_window.html')">
    <p id="nbdr"></p>
    <p id="nb"></p>
  </div> -->
  <div class="empty" id="count">
    <ul class="doufu" v-cloak>
      <li>
        <div>
          <p class="bimg">
            绿地面积
          </p>
          <p class="shu" v-text='area'>
            <!--   {{arr[0]}} -->
            0

          </p>
          <p class="ci hui">

            <span class="">㎡</span>
          </p>
        </div>
      </li>
      <li>
        <div>
          <p class="bimg">
            施工队伍
          </p>
          <p class="shu" id="sgnum">
            <!-- {{arr[2]}} -->0</p>
          </p>
          <p class="ci hui">

            <span class="">个</span>
          </p>
        </div>
      </li>
      <li>
        <div>
          <p class="bimg">
            养护次数
          </p>
          <p class="shu" v-text='yhnum'>
            <!--   {{arr[4]}} -->0</p>
          <p class="ci hui">

            <span class="">次</span>
          </p>
        </div>
      </li>
      <li>
        <div>
          <p class="bimg">
            巡查次数
          </p>
          <p class="shu" id="patrol">
            0
          </p>
          <p class="ci hui">

            <span class="">次</span>
          </p>
        </div>
      </li>
    </ul>
  </div>

  <br>
  <div class="tongjiimg">
    <!-- 养护类型占比饼图 -->
    <div style="background-color: #fff;margin-top: 220px;">
      <span>
        <img src="../image/bottombtn0402.png" style="width: 30px;height: 30px;">
       <span style="font-size: 13px;color: #c4c4c4;">养护管理</span>
      </span>
      <div id="containerPie" style="height: 200px; width: 100%;margin-top: 10px;"></div>
    </div>
    <!-- 巡查柱状图 -->
    <div style="background-color: #fff;margin-top: 20px;">
      <span>
        <img src="../image/bottombtn0302s.png" style="width: 30px;height: 30px;">
        <span style="font-size: 13px;color: #c4c4c4;">巡查统计</span>
      </span>
      <div id="containerPatrol" style="height: 200px; width: 100%;margin-top: 10px;"></div>
    </div>
    <div style="background-color: #fff;margin-top: 20px;">
      <span>
        <img src="../image/bottombtn0202s.png" style="width: 30px;height: 30px;">
        <span style="font-size: 13px;color: #c4c4c4;">缺勤统计</span>
      </span>
      <!-- 考勤缺勤当月逐日折线图 -->
      <div id="container1" style="height: 250px; width: 100%;margin-top: 0px;"></div>
    </div>
    <div style="background-color: #fff;margin-top: 20px;">
      <span>
        <img src="../image/jksss.png" style="width: 30px;height: 30px;">
        <span style="font-size: 13px;color: #c4c4c4;">健康异常</span>
      </span>
      <!-- 健康异常当月逐日折线图 -->
      <div id="container" style="height: 250px; width: 100%;margin-top: 0px;"></div>
    </div>
  </div>
</body>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
  apiready = function () {
    var projectid = $api.getStorage("selectpor").id;
    var user = $api.getStorage("userSession");
    var userid = $api.getStorage("userSession").data.id;
    var departName = $api.getStorage("userSession").data.enterpriseProjects
      .projectName;
    var userName = $api.getStorage("userSession").data.realName;
    var proId = $api.getStorage("userSession").data.proId;
    $("#nbdr").text(userName);
    $("#nb").text(departName);
    var roleId = user.data.sysRole.sysRoleCode.id;

    var qiyeid = $api.getStorage("userSession").data.enterprise.id;
    //豆腐块
    var count = new Vue({
      el: "#count",
      data: {
        arr: [],
        area: 0,
        yhnum: 0,
        //sgnum:0
      },
      created: function () {
        $.ajax({
          type: "post",
          //async : false, //同步执行
          url: BaseServiceUrl + "mobile/greedLand/glstatistics.json",
          data: {
            proid: proId,
            areaid: projectid,
            enterpriseid: qiyeid
          },
          dataType: "json", //返回数据形式为json
          success: function (result) {
            var obj = JSON.parse(result.data);
            count.area = obj.area;
            count.yhnum = obj.yhnum;
          },
          error: function (error) {
            alert(JSON.stringify(error))
          }
        });
      },
    });
    //巡查豆腐块
    $.ajax({
      type: "post",
      //async : false, //同步执行
      url: BaseServiceUrl + "mobile/admin/adminPatrolAll.json",
      data: {
        enterpriseId: qiyeid,
        areaId: projectid,
      },
      dataType: "json", //返回数据形式为json
      success: function (result) {
        //alert(JSON.stringify(result));
        if (result != null) {
          $("#patrol").text(result.data);
          $("#sgnum").text(result.data1);
        }
      },
    });
    //养护
    var appss = new Vue({
      el: "#lds",
      data: {
        lds: [],
      },
      created: function () {

        $.ajax({
          type: "post",
          //async : false, //同步执行
          url: BaseServiceUrl + "app/lnsecthistory/main.json",
          data: {
            projectid: projectid,
            userid: user.data.id,
          },
          dataType: "json", //返回数据形式为json
          success: function (result) {
            //alert(JSON.stringify(result));
            if (result != null) {
              for (var i = 0; i < result.length; i++) {
                //alert(result.data[i])
                appss.lds.push(result[i]);
              }
            }
          },
        });
      },
    });

    //养护饼状图
    var dom = document.getElementById("containerPie");
    var myChart = echarts.init(dom);
    //alert(1)
    $.ajax({
      type: "post",
      //async : false, //同步执行
      url: BaseServiceUrl + "mobile/mainten/gltop.json",
      data: {
        proid: proId,
        areaid: projectid
      },
      dataType: "json", //返回数据形式为json
      success: function (result) {
        var obj = JSON.parse(result.data);
        // alert(JSON.stringify(result))
        var app = {};
        option = null;
        option = {
          color: ['#feb64d', '#9287e7', '#5bc49f', '#60acfc', '#32d3eb'],
    /*       title: {
            text: '精细养护分类占比',
            subtext: '',
            textStyle: {
              fontSize: 14
            },
            left: 'center'
          }, */
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            //orient: 'vertical',
          
            data: ['绿地养护', '卫生清理', '设施维护', '植保管理'],
            itemGap:2
          },
          
          series: [{
            name: '精细养护分类占比',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [{
                value: obj.lv,
                name: '绿地养护'
              },
              {
                value: obj.ws,
                name: '卫生清理'
              },
              {
                value: obj.ss,
                name: '设施维护'
              },
              {
                value: obj.zb,
                name: '植保管理'
              }

            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        };
        if (option && typeof option === "object") {
          myChart.setOption(option, true);
        }
      },
      error: function (er) {
        alert(JSON.stringify(er))
      }
    });
    //日报
    var appsss = new Vue({
      el: "#ldss",
      data: {
        ldss: [],
      },
      created: function () {
        $.ajax({
          type: "post",
          //async : false, //同步执行
          url: BaseServiceUrl + "app/lnsecthistory/xin.json",
          data: {},
          dataType: "json", //返回数据形式为json
          success: function (result) {
            //alert(JSON.stringify(result));
            if (result != null) {
              for (var i = 0; i < result.length; i++) {
                //alert(result.data[i])
                appsss.ldss.push(result[i]);
              }
            }
          },
        });
      },
    });
    // dianliang(projectid);


    $.ajax({
      type: "post",
      //async : false, //同步执行
      url: BaseServiceUrl + "mobile/admin/findAllPatrolList.json",
      data: {
        enterpriseId: qiyeid,
        areaId: projectid,
        proId: proId
      },
      dataType: "json", //返回数据形式为json
      success: function (result) {
        // console.log(JSON.stringify(result))
        //巡查柱状图
        var dom3 = document.getElementById("containerPatrol");
        var myChart3 = echarts.init(dom3);
        var app3 = {};
        option3 = null;

        option3 = {
       /*    title: {
            text: '巡查次数逐月统计',
            left: 'center',
            textStyle: {
              fontSize: 14
            },
          }, */
          tooltip: {
            trigger: 'axis'
          },
          legend: {
          //  orient: 'vertical',
            data: ['完成', '未完成'],
           // left: 'left'
          },
          calculable: true,
          xAxis: [{
            type: 'category',
            data: result.data.month,
            name:'月份',
            boundaryGap: false, 
          }],
          yAxis: [{
            name: '巡查(次/月)',
            type: 'value',
            boundaryGap: false, 
          }],
          series: [{
              name: '完成',
              type: 'bar',
              color: '#60ACFC',
              data: result.data.com,
              markPoint: {
                data: [{
                    type: 'max',
                    name: '最大值'
                  },
                  {
                    type: 'min',
                    name: '最小值'
                  }
                ]
              },
              markLine: {
                data: [{
                  type: 'average',
                  name: '平均值'
                }]
              }
            },
            {
              name: '未完成',
              type: 'bar',
              color: '#AFE39B',
              data: result.data.unCom,
              markPoint: {
                data: [{
                    name: '年最高',
                    value: 182.2,
                    xAxis: 7,
                    yAxis: 183
                  },
                  {
                    name: '年最低',
                    value: 2.3,
                    xAxis: 11,
                    yAxis: 3
                  }
                ]
              },
              markLine: {
                data: [{
                  type: 'average',
                  name: '平均值'
                }]
              }
            }
          ],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '0%',
            top: '25%',
            containLabel: true
          }
        };

        if (option3 && typeof option3 === "object") {
          myChart3.setOption(option3, true);
        }
      },
    });
    //考勤缺勤折线图
    $.ajax({
      url: BaseServiceUrl + "mobile/attendanceCon/admin_att_static.json",
      type: "POST",
      data: {
        roleId: roleId,
        enterpriseId: qiyeid,
        areaId: projectid
      },
      dataType: "json",
      success: function (ret) {
        // alert(JSON.stringify(ret))
        var dom = document.getElementById("container1");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
          color: '#5FC5A1',
       /*    title: {
            text: '当月缺勤人数统计',
            left: 'center',
            textStyle: {
              fontSize: 14
            },
          }, */
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: ret.daylist
          },
          yAxis: {
            name: '缺勤(人/日)',
            type: 'value'
          },
          series: [{
            name: '缺勤',
            data: ret.worklist,
            type: 'line',
            smooth: true
          }]
        };
        if (option && typeof option === "object") {
          myChart.setOption(option, true);
        }
      },
      error: function (jqXHR, textStatus, errorThrown) {}
    });

    //健康异常折线图
    $.ajax({
      type: "post",
      //async : false, //同步执行
      url: BaseServiceUrl + "mobile/healthy/statis.json",
      data: {
        e_id: qiyeid,
        a_tid: user.data.team_id,
        area_id: projectid,
        role_id: roleId
      },
      dataType: "json", //返回数据形式为json
      success: function (result) {
        // alert(JSON.stringify(result))

        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
          color: "#66AFFC",
        /*   title: {
            text: "当月健康异常统计",
            left: "center",
            textStyle: {
              fontSize: 14
            },
          }, */
          tooltip: {
            trigger: "axis",
          },
          xAxis: {
            type: "category",
            data: result.daylist,
          },
          yAxis: {
            type: "value",
            name: '异常(人/日)',
          },
          series: [{
            name: "异常",
            data: result.worklist,
            type: "line",
            smooth: true,
          }, ],
        };
        if (option && typeof option === "object") {
          myChart.setOption(option, true);
        }
      },
    });
  }


  /* function dianliang(projectid) {
    var user = $api.getStorage("userSession");
    $.ajax({
      type: "post",
      //async : false, //同步执行
      url: BaseServiceUrl + "mobile/home/xuncha.json",
      data: {
        projectid: projectid,
        userid: user.data.id,
      },
      dataType: "json", //返回数据形式为json
      success: function (result) {
        var doms = document.getElementById("witerchart");
        var myCharts = echarts.init(doms);
        var app = {};
        option = null;
        app.title = "xxxxx";
        options = {
          color: ["#3398DB"],
          title: {
            text: "巡查逐月统计",
            left: "center",
            padding: 30,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: [
                "一月",
                "二月",
                "三月",
                "四月",
                "五月",
                "六月",
                "七月",
                "八月",
                "九月",
                "十月",
                "十一月",
                "十二月",
              ],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "次",
              type: "bar",
              barWidth: "60%",
              data: [
                result[0],
                result[1],
                result[2],
                result[3],
                result[4],
                result[5],
                result[6],
                result[7],
                result[8],
                result[9],
                result[10],
                result[11],
              ],
            },
          ],
        };
        if (options && typeof options === "object") {
          myCharts.setOption(options, true);
        }
      },
    });
  } */
</script>

</html>